<template>
	<view>
		<view class="header">
				<text class="iconfont icon-dizhi"> 确认订单</text>
		</view>
		<view class="content">
			<view class="address" v-if="isAddressBtn==false">
				<text class="iconfont icon-dizhi"></text>
				<view class="addressCenter">
					<view @click="skipchangeAddress">
						收货人：{{morenaddress.s_people}} {{morenaddress.s_tel}}
					</view>
					<view @click="skipchangeAddress">
						收货地址：{{morenaddress.s_dizhi}}
					</view>
				</view>
				<text @click="skipchangeAddress" class="iconfont icon-youjiantou"></text>
			</view>
			<!-- 添加地址按钮 -->
			<view v-else class="dizhi" style="text-align: center;">
				<button type="warn" size="mini" @click="skipaddAddress">添加地址</button>
			</view>
			
			<view class="chufang" v-if="ischufangBtn==false">
				<view>
					用药人：{{yongyaorennew.yyr_name}}
				</view>
				<view>
					<button type="warn" size="mini" @click="skipaddchufang">添加处方</button>
					<button type="warn" size="mini" @click="skipeditchufang">查看处方</button>
				</view>
			</view>
			<!-- 添加处方按钮 -->
			<view v-else class="dizhi" style="text-align: center;">
				<button type="warn" size="mini" @click="skipaddchufang">添加处方</button>
			</view>
			<view class="goods">
				<view class="item" v-for="v in itemArr" :key="v.yp_id">
					<view>
						<image mode="widthFix" :src="IP+v.yp_imgsrc"></image>
					</view>
					<view class="itemRight">
						<view class="itemRightHeader">
							<view>
								<image src="../../static/image/logo.png" mode="widthFix"></image>
							</view>
							<view><text>{{v.yp_mingcheng}}</text></view>
						</view>
						<view class="guige">
							规格：{{v.yaopinguige}}
						</view>
						<view class="itemRightFooter">
							<view>￥{{v.yp_jiage}}</view>
							<view>
								<text>×{{v.yaopinshuliang}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="youhuiquan">
				<view>优惠券</view>
				<view @click="skipyouhuijuan">
					<text>{{xsyhj}}</text>
					<text class="iconfont icon-youjiantou"></text>
				</view>
			</view>
			<view class="baozhuang">
				<view>选择私密包装</view>
				<view>
					<switch checked @change="switch1Change" />
				</view>
			</view>
			<view class="jiage">
				<view>
					<view>商品金额</view>
					<text>￥{{totalprice}}</text>
				</view>
				<view>
					<view>运费</view>
					<text>￥{{yunfei}}</text>
				</view>
			</view>
			<view class="zhifu">
				<view>支付方式</view>
				<view>
					<view>
						<text class="iconfont icon-weixinzhifu"></text>
						<text>微信支付</text>
					</view>
					<view>
						<radio :checked="selecradio==1?true:false" @click="radioChange(1)"/>
					</view>
				</view>
				<view>
					<view>
						<text class="iconfont icon-zhifu-_zhifubaozhifu"></text>
						<text>支付宝支付</text>
					</view>
					<view>
						<radio :checked="selecradio==2?true:false" @click="radioChange(2)"/>
					</view>
				</view>
			</view>
			<!-- 站位空白 -->
			<view class="kongbai"></view>
			<view class="footer">
				<text>总价：<text>￥{{totalprice+yunfei-youhuiquan}}</text></text>
				<view>
					<button type="default" @click="tijiao">提交订单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {reactive,toRefs,computed,onMounted,onBeforeUnmount} from 'vue'
	import {useStore} from 'vuex'
	import http from '../../utils/http.js';
	export default {
		setup(){
			const {state,getters,commit,dispatch} = useStore();
			let data=reactive({
				xsyhj:'无可用',
				youhuiquan:1,
				selecradio:1,
				IP:computed(()=>state.IP),
				yunfei:10.6,
				itemArr:computed(()=>state.shopcart.skipArr),
				totalprice:computed(()=>state.shopcart.totalprice),
				addressArr:computed(()=>state.shopcart.useraddressArr),
				allyongyaorendata:computed(()=>state.shopcart.yongyaorenArr),
				yongyaorennew:computed(()=>state.shopcart.yongyaoren),
				yongyaoren:{
					yyr_age: "42",
					yyr_bingshi: "有过敏病史",
					yyr_birth: "1979-10",
					yyr_guanxi: "本人",
					yyr_id: 1,
					yyr_isUsed: 1,
					yyr_name: "李四2",
					yyr_sex: "男",
					yyr_shengfenzheng: "123456781353456789",
					yyr_tel: "13485556877",
					yyr_yonghuId: 1
				},
				// 渲染默认地址的对象
				morenaddress:{
					s_dizhi: "北京市朝阳区石佛营路1号",
					s_id: 1,
					s_isMoren: 1,
					s_people: "李四",
					s_tel: "12121313",
					s_yonghuId: 1
				},
				// 是否显示添加地址按钮
				isAddressBtn:false,
				// 切换添加处方模块
				ischufangBtn:computed(()=>state.shopcart.ischufangBtn),
				skipchangeAddress(){
					uni.navigateTo({
						url:'/pages/changeAddress/changeAddress'
					})
				},
				// 添加地址
				skipaddAddress(){
					uni.navigateTo({
						url: '/pages/addAddress/addAddress'
					})
				},
				// 添加处方
				skipaddchufang(){
					uni.navigateTo({
						url:'/pages/addchufang/addchufang'
					})
				},
				// 查看处方
				skipeditchufang(){
					uni.navigateTo({
						url:'/pages/editchufang/editchufang'
					})
				},
				skipyouhuijuan(){
					state.shopcart.shangpinId=[]
					for (let i = 0; i < data.itemArr.length; i++) {
						state.shopcart.shangpinId.push(data.itemArr[i].yp_id)
					}
					uni.navigateTo({
						url:'/pages/useCoupons/useCoupons'
					})
					// console.log(state.shopcart.shangpinId)
				},
				// 开关
				switch1Change(e){
					console.log('switch1 发生 change 事件，携带值为', e.detail.value)
				},
				// 单选
				radioChange(e){
					// console.log(e)
					data.selecradio=e
				},
				tijiao(){
					console.log('提交订单！')
					uni.showModal({
						// title: '提示',
						content: '确认支付',
						success:  async function (res) {
							if (res.confirm) {
								console.log('用户点击确定');
								uni.showLoading({
									title: '加载中'
								});
								let flag=0
								let id
								let whichdd
								for (let i = 0; i < data.itemArr.length; i++) {
									if(data.itemArr[i].ptdd_id){
										id=data.itemArr[i].ptdd_id
										whichdd='pt'
									}else if(data.itemArr[i].ypdd_id){
										id=data.itemArr[i].ypdd_id
										whichdd='yp'
									}
									// console.log(id,whichdd)
									await http({
										url:'/tijiaodingdan',
										method:'post',
										data:{
											id:id,
											whichdd:whichdd
										}
									}).then((res)=>{
										// console.log(res)
										// 将提交的类型订单存起来
										state.shopcart.whichdd=whichdd
										if(res.data.code==200){
											flag=1
											// 改变优惠券的状态
											if(state.UC.youhuiquan){
												http({
													url:'/changeyouhuiquan',
													method:'post',
													data:{
														id:state.UC.youhuiquan.yh_id
													}
												}).then((res)=>{
													console.log(res)
												})
											}
										}
									})
								}
								if(flag){
									setTimeout(function () {
										uni.hideLoading();
									}, 1500);
									setTimeout(function(){
										uni.reLaunch({
											url:'/pages/zhifuchenggong/zhifuchenggong'
										})
									},2000)
								}
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				},
				// 随机数，前包后不包
				getRandomInt(min,max) {
				  min = Math.ceil(min);
				  max = Math.floor(max);
				  return Math.floor(Math.random() * (max - min)) + min; //不含最大值，含最小值
				}
			})
			onMounted(()=>{
				data.yunfei=data.itemArr.length*data.getRandomInt(5,20)
				
				// 模拟用户1登录
				let id=state.userID
				// // 查询用户的收货地址
				// http({
				// 	url:'/getuserAddress',
				// 	method:'post',
				// 	data:{
				// 		id:id
				// 	}
				// }).then((res)=>{
				// 	// console.log(res.data.data)
				// 	if(res.data.code==200){
				// 		// 当用户无地址数据时，让其显示按钮
				// 		if(!res.data.data.length)data.isAddressBtn=true
				// 		commit('shopcart/getAddressData',res.data.data)
				// 		// console.log(data.addressArr)
				// 		for (let i = 0; i < data.addressArr.length; i++) {
				// 			if(data.addressArr[i].s_isMoren==1){
				// 				data.morenaddress=data.addressArr[i]
				// 			}
				// 		}
				// 	}
				// })
				// 查询该用户的所有用药人
				http({
					url:'/getyonghu',
					method:'post',
					data:{
						id:id
					}
				}).then((res)=>{
					// console.log(res.data.data)
					if(res.data.code==200){
						commit('shopcart/setyongyaorenArr',res.data.data)
						// console.log(data.allyongyaorendata)
						if(data.allyongyaorendata.length){
							for (let i = 0; i < data.allyongyaorendata.length; i++) {
								// 将在使用的用药人存入仓库
								if(data.allyongyaorendata[i].yyr_isUsed==1){
									commit('shopcart/setyongyaoren',data.allyongyaorendata[i])
									break
								}
							}
							console.log(data.yongyaorennew)
							// 有用药人，但是没有使用的也显示按钮
							if(data.yongyaorennew=='')state.shopcart.ischufangBtn=true
						}else{
							state.shopcart.ischufangBtn=true
						}
						
					}
				})
			})
			
			onBeforeUnmount(()=>{
				state.shopcart.skipArr=[]
			})
			return {...toRefs(data)}
		},
		onShow(){
			// 是否有优惠券
			console.log(this.$store.state.UC.youhuiquan)
			if(this.$store.state.UC.youhuiquan){
				this.xsyhj=this.$store.state.UC.youhuiquan.yh_mingcheng
				this.youhuiquan=parseInt(this.$store.state.UC.youhuiquan.yh_mianzhi)
			}
			// console.log(123)
			// 模拟用户1登录
			let id=this.$store.state.userID
			// 查询用户的收货地址
			http({
				url:'/getuserAddress',
				method:'post',
				data:{
					id:id
				}
			}).then((res)=>{
				// console.log(res.data.data)
				if(res.data.code==200){
					// 当用户无地址数据时，让其显示按钮
					if(!res.data.data.length)this.isAddressBtn=true
					this.$store.commit('shopcart/getAddressData',res.data.data)
					// console.log(data.addressArr)
					for (let i = 0; i < this.addressArr.length; i++) {
						if(this.addressArr[i].s_isMoren==1){
							this.morenaddress=this.addressArr[i]
						}
					}
				}
			})
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less">
	@import url("~@/static/fonts/iconfont.css");
	.header {
		padding: 20rpx 30rpx;
		border-bottom: 1rpx solid #efefef;
	}
	.content{
		background-color: #F2F2F2;
	}
	.address{
		background-color: white;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		>text:nth-child(1){
			margin-top: -70rpx;
			padding-left: 30rpx;
		}
		.addressCenter{
			>view:nth-child(2){
				margin-top: 30rpx;
			}
		}
	}
	.dizhi{
		background-color: white;
		margin: 15rpx 0;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
	}
	.chufang{
		background-color: white;
		margin: 15rpx 0;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		view:nth-of-type(2){
			margin-top: 30rpx;
			button{
				margin-left: 30rpx;
			}
		}
	}
	.item {
		background-color: white;
		border-top: 1px solid #F2F2F2;
		border-bottom: 1px solid #F2F2F2;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		>view:nth-child(1) {
			padding-left: 15rpx;
			image {
				width: 125rpx;
			}
		}
		.itemRight {
			padding: 10rpx 0;
			flex: 1;
			.itemRightHeader {
				padding-left: 20rpx;
				margin-bottom: 15rpx;
				display: flex;
				justify-content: space-between;
	
				view:nth-child(1) {
					image {
						padding-top: 10rpx;
						width: 25rpx;
					}
				}
				view:nth-child(2) {
					padding-left: 15rpx;
					flex: 1;
				}
			}
			.guige{
				padding-left: 20rpx;
				margin-bottom: 15rpx;
			}
			.itemRightFooter {
				padding-left: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				>view:nth-child(1) {
					flex: 1;
					color: red;
				}
			}
		}
	}
	.youhuiquan{
		background-color: white;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 15rpx 0;
		>view:nth-child(2){
			text:nth-child(1){
				color: #b6b6b6;
				padding-right: 30rpx;
			}
		}
	}
	.baozhuang{
		background-color: white;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		switch{
			transform:scale(0.7)
		}
	}
	.jiage{
		background-color: white;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		margin: 15rpx 0;
		view{
			padding: 10rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			text{
				color: red;
			}
		}
	}
	.zhifu{
		background-color: white;
		padding: 0rpx 30rpx;
		box-sizing: border-box;
		>view{
			padding: 10rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			radio{
				transform: scale(0.8);
			}
			.icon-weixinzhifu{
				color: #06C700;
				margin-right: 10rpx;
			}
			.icon-zhifu-_zhifubaozhifu{
				color: #0DA3F4;
				margin-right: 10rpx;
			}
		}
	}
	.footer{
		width: 100%;
		box-sizing: border-box;
		border-top: 1rpx solid #efefef;
		background-color: white;
		padding-left: 30rpx;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		>text{
			text{
				color: red;
			}
		}
		>view:nth-of-type(1) {
			width: 350rpx;
			button {
				height: 98rpx;
				line-height: 98rpx;
				color: white;
				background-color: red;
				border: 1rpx solid red;
				border-radius: 0;
				font-size: 13px;
			}
		}
	}
	.kongbai {
		height: 116rpx;
		// background-color: red;
	}
</style>
